<template>
  <div class="coupon">
    <van-nav-bar title="我的优惠券" left-arrow @click="back"/>
    <van-tabs>
      <van-tab title="全部">
        <div class="redmeen" v-for="(item, index) in redeemItem " :key="index">
          <div class="redeem-left">
            <div class="redeem-left-top">
              <p>问诊</p>
            </div>
            <div class="redeem-left-buttom">
              <h1>9</h1>
              <h3>折</h3>
            </div>
          </div>
          <div class="redeem-right">
            <h3>
              <b>{{ item.name }}</b>
            </h3>
            <p>
              {{ item.condition }}
            </p>
            <p>
              {{ item.满150元可用 }}
            </p>
          </div>
        </div>
      </van-tab>



      <van-tab title="问诊券">
        <div class="medical">
          <button class="btn">问诊</button>
          <b style="color: #3f86ff;font-size: .7rem; position: absolute;top: .4rem;left: .3rem;">9</b>
          <span style="color: #3f86ff;font-size: .3rem;position: absolute;top: .7rem;left: .75rem;">折</span>
          <p style="position: absolute;top: .1rem;right: .3rem;font-size: .25rem;"><b>新人专家问诊9折</b></p>
          <p style="position: absolute;top: .5rem;right: .28rem;font-size: .18rem;color: #ccc;">仅限专家问诊(通用)使用</p>
          <p style="position: absolute;top: .85rem;right: .33rem;font-size: .18rem;color: #ccc;">无门槛,最高优惠100元</p>
          <div style="width: 3rem;height:.01rem;background: #ccc;position: absolute;top: 1.2rem;left: .25rem;"></div>
          <p style="font-size: .12rem;position: absolute;left:.25rem;bottom: .08rem;color: #ccc;">有效期:2024.11.12
            00:00至2024.12.11 23.59</p>
          <span
            style="position: absolute;right: 0.25rem;bottom:.08rem;font-size: .12rem;color: #3f86ff;">去使用&ensp;></span>
        </div>

        <p style="color: #ccc;position: absolute;top: 2.5rem;left: 1rem;">没有更多了&ensp;|&ensp;
          <span style="color: #3f86ff;">查看不可用券</span>
        </p>
      </van-tab>
      <van-tab title="云药房券">
        <div class="expect">
          <img src="../../image/37.png" alt="" style="width: 100%;height: 100%;">
        </div>
        <p style="color: #ccc;position: absolute;top: 2.5rem;left: 1rem;">没有更多了&ensp;|&ensp;
          <span style="color: #3f86ff;">查看不可用券</span>
        </p>
      </van-tab>
      <van-tab title="健康套餐">
        <div class="expect">
          <img src="../../image/37.png" alt="" style="width: 100%;height: 100%;">
        </div>
        <p style="color: #ccc;position: absolute;top: 2.5rem;left: 1rem;">没有更多了&ensp;|&ensp;
          <span style="color: #3f86ff;">查看不可用券</span>
        </p>
      </van-tab>
      <van-tab title="其他">
        <div class="expect">
          <img src="../../image/37.png" alt="" style="width: 100%;height: 100%;">
        </div>
        <p style="color: #ccc;position: absolute;top: 2.5rem;left: 1rem;">没有更多了&ensp;|&ensp;
          <span style="color: #3f86ff;">查看不可用券</span>
        </p>
      </van-tab>
    </van-tabs>
    <div class="bottom">
      <p @click="JumpRedeem">兑换优惠券<span>&emsp;></span></p>
      <img src="../../image/coupon.png" alt="" style="position: absolute;top: .26rem;left: 1.15rem;">
    </div>
  </div>
  <div class="fixed">
    <br>
    使用
    <br>
    规则
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useCounterStore } from '../pinia/index';
interface Item {
  available: number,
  condition: string,
  reason: '',
  value: number,
  name: string,
  startAt: number,
  endAt: number,
  valueDesc: string,
  unitDesc: string,
}
const redeemItem = ref<Item[]>([])
const store = useCounterStore()
redeemItem.value = store.redreemlist

const router = useRouter()
const JumpRedeem = () => {
  router.push('/redeem')
}
const back = () => {
  router.push('/home/my')
}
</script>

<style scoped lang="scss">
.coupon {
  width: 100%;
  height: 6.66rem;
  background: #f5f6f7;
  overflow: scroll;
}

.medical {
  width: 3.5rem;
  height: 1.5rem;
  background: #fff;
  border-radius: .1rem;
  margin-left: .13rem;
  margin-top: .1rem;
  position: relative;
}

.btn {
  width: 1rem;
  height: .3rem;
  background: #3f86ff;
  border: none;
  color: #fff;
  border-radius: .05rem;
  position: absolute;
  top: .1rem;
  left: .1rem;
}

.bottom {
  width: 100%;
  height: .8rem;
  background: #fff;
  text-align: center;
  position: fixed;
  bottom: 0;
}

.bottom p {
  margin-top: .3rem;
  margin-left: .3rem;
}

.fixed {
  width: .8rem;
  text-align: center;
  align-items: center;
  line-height: .2rem;
  height: .8rem;
  background: #fff;
  border: .01rem solid #ccc;
  border-radius: 50%;
  position: fixed;
  right: 0;
  top: 4.5rem;
}

.expect {
  width: 100%;
  height: 2rem;
  margin-top: .1rem;
}

.redmeen {
  width: 3.5rem;
  height: 1.5rem;
  background: #ffff;
  border-radius: .1rem;
  margin-left: .13rem;
  margin-top: .1rem;
  display: flex;
  .redeem-left {
    width: 1.5rem;
    background: #ffff;
    height: 100%;
    border-radius: .1rem;
    .redeem-left-top {
      width: 100%;
      height: .3rem;
      p {
        margin-left: .25rem;
        margin-top: .1rem;
        background: #3f86ff;
        width: 1rem;
        height: .3rem;
        border: none;
        color: #fff;
        border-radius: .05rem;
        text-align: center;
        line-height: .33rem;
      }
    }

    .redeem-left-buttom {
      width: 100%;
      height: 1rem;
      display: flex;
      h1 {
        font-size: .7rem;
        color: #3f86ff;
        padding-left: .35rem;
        padding-top: .1rem;
      }

      h3 {
        color: #3f86ff;
        padding-left: .1rem;
        padding-top: .5rem;
      }
    }


  }

  .redeem-right {
    width: 2rem;
    height: 100%;
    h3{
      padding-top: .2rem;
      padding-left: .2rem;
    }
    p{
      padding-top: .2rem;
      padding-left: .2rem;
      color: #757575;
    }
  }
}
</style>
